<template>
	<div :class="{ hidden: hidden }" class="pagination-container">
		<el-pagination
			:small="small"
			v-model:current-page="currentPage"
			v-model:page-size="pageSize"
			:layout="layout"
			:page-sizes="pageSizes"
			:total="total"
			v-bind="$attrs"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
	</div>
</template>

<script setup>
import { ElPagination } from "element-plus";
import { computed } from "vue";

const props = defineProps({
	hidden: {
		type: Boolean,
		default: false,
	},
	small: {
		type: Boolean,
		default: false,
	},
	page: {
		type: Number,
		default: 1,
	},
	pageSizes: {
		type: Array,
		default: [20, 30, 40, 50, 100, 150, 200],
	},
	limit: {
		type: Number,
		default: 50,
	},
	layout: {
		type: String,
		default: "total, sizes, prev, pager, next, jumper",
	},
	total: {
		type: Number,
		required: true,
	},
});

const emits = defineEmits(["update:page", "update:limit", "pagination"]);

const currentPage = computed({
	get: () => {
		return props.page;
	},
	set: (val) => {
		emits("update:page", val);
	},
});

const pageSize = computed({
	get: () => {
		return props.limit;
	},
	set: (val) => {
		emits("update:limit", val);
	},
});

const handleSizeChange = (val) => {
	emits("pagination", {
		page: currentPage.value,
		limit: val,
		type: "sizeChange",
	});
};

const handleCurrentChange = (val) => {
	emits("pagination", {
		page: val,
		limit: pageSize.value,
		type: "currentChange",
	});
};
</script>

<style lang="scss" scoped>
.pagination-container.hidden {
	display: none;
}
</style>
